<div class="create-multisig-page">
  <div class="container-fluid main">
    <div class="row">
      <div class="col-sm-8">
        <h2>{{ 'APOSTILLE_TRANSFER_TITLE' | translate }}</h2>
      </div>
    </div>
    <div class="row">

      <div class="col-md-6 col-sm-12">
        <div class="panel-heading">
          <h3>{{ 'AGGREGATE_MODIFICATION_NAME' | translate }}</h3>
        </div>
        <div class="panel-body">
          <fieldset>
            <!-- NOTARIZATION ACCOUNT -->
            <fieldset class="form-group">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{ 'APOSTILLE_NTY_ACCOUNT' | translate }}</label>
                </span>
             	  <input class="form-control readOnly" type="text" ng-model="$ctrl.formData.accountToConvert" readOnly/>
              </div>
            </fieldset>
            <!-- BALANCE OF NOTARIZATION ACCOUNT -->
            <fieldset class="form-group" ng-show="$ctrl.multisigInfoData.account">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{ 'FORM_SIDE_BTN_BALANCE' | translate }}</label>
                </span>
                <div class="form-control formFloat" readOnly>
                  <input class="readOnly" type="text" value="{{ ($ctrl.multisigInfoData.account.balance | fmtNemValue)[0] }}.{{ ($ctrl.multisigInfoData.account.balance | fmtNemValue)[1] }}" readOnly/>
                  <label class="floatRight"><small>XEM</small></label>
                </div>
              </div>
            </fieldset>
            <!-- HIDDEN PRIVATE KEY OF NOTARIZATION ACCOUNT -->
            <fieldset class="form-group" style="display: none;">
             	<input class="form-control "
                type="password"
                placeholder="{{ 'AGGREGATE_ACCOUNT_TO_CONVERT_PRIVATE' | translate }}"
                ng-model="$ctrl.common.privateKey" readOnly/>
            </fieldset>
            <!-- COSIGNATORY ADDRESS TO ADD -->
            <fieldset class="form-group">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{ 'GENERAL_COSIGNATORY' | translate }}</label>
                </span>
                <input class="form-control "
                  type="text"
                  placeholder="{{ 'AGGREGATE_ADD_PLACEHOLDER' | translate }}"
                  ng-model="$ctrl.formData.cosignatoryToAdd" ng-model-options="{debounce:500}" ng-change="$ctrl.processCosignatoryToAdd();"/>
                <span class="input-group-btn adding">
          		    <!-- Disabled if no public key or no address or cosig === multisig -->
                  <button type="button" class="btn btn-warning" ng-click="$ctrl.addCosig()" ng-disabled="!$ctrl.formData.cosignatoryPubKey || !$ctrl.formData.cosignatoryAddress || $ctrl.formData.cosignatoryAddress === $ctrl.multisigInfoData.account.address || !$ctrl.formData.accountToConvert" title="{{ 'AGGREGATE_ADD_BTN_TITLE' | translate }}">
                    <i class="fa fa-plus"></i>
                  </button>
                </span>
              </div>
            </fieldset>
            <!-- SHOW COSIGNATORY ADDRESS TO ADD IF ALIAS USED-->
            <fieldset class="form-group" ng-show="$ctrl.showAlias">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{'FORM_SIDE_BTN_ALIAS_OF' | translate}}: </label>
                </span>
                <input class="form-control"
                  type="text"
                  ng-model="$ctrl.aliasAddress" readOnly/>
              </div>
            </fieldset>
            <!-- MIN SIGNATURES NEEDED -->
            <fieldset class="form-group">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{ 'AGGREGATE_MIN_SIGNATURES' | translate }}: </label>
                </span>
                <input class="form-control"
                  type="number"
                  placeholder="{{ 'AGGREGATE_MIN_SIGNATURES_PLACEHOLDER' | translate }}"
                  ng-model="$ctrl.formData.minCosigs" min="1" ng-change="$ctrl.updateFee();"/>
              </div>
            </fieldset>
            <!-- TRANSACTION FEES -->
            <fieldset class="form-group">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{'GENERAL_FEE' | translate}}: </label>
                </span>
                <div class="form-control formFloat" readOnly>
                  <span class="feeAmount">
                    <span>{{($ctrl.formData.fee | fmtNemValue)[0]}}.{{($ctrl.formData.fee | fmtNemValue)[1]}}</span>
                  </span>
                  <label class="floatRight"><small>XEM</small></label>
                </div>
              </div>
            </fieldset>
            <!-- SEND TRANSACTION -->
            <button class="btn btn-success"
              type="submit" ng-disabled="$ctrl.okPressed || !$ctrl.common.privateKey || !$ctrl.cosignatoryArray.length" ng-click="$ctrl.send()">
              <i class="fa fa-send"></i> {{ 'GENERAL_SEND' | translate }}
            </button>
          </fieldset>
        </div>
      </div>

      <div class="col-md-6">
        <!-- LIST OF SIGNERS TO BE ADDED -->
        <div class="panel-heading">
          <h3>{{ 'AGGREGATE_MODIFICATION_LIST' | translate }}</h3>
          <div ng-show="$ctrl.cosignatoryArray.length > 5"><button class="buttonStyle" ng-disabled="$ctrl.currentPage == 0" ng-click="$ctrl.currentPage = $ctrl.currentPage-1"><span class="fa fa-chevron-left" aria-hidden="true"></span></button><b>{{$ctrl.currentPage+1}}/{{$ctrl.numberOfPages()}}</b><button class="buttonStyle" ng-disabled="$ctrl.currentPage+1 >= $ctrl.numberOfPages()" ng-click="$ctrl.currentPage = $ctrl.currentPage+1"> <span class="fa fa-chevron-right" aria-hidden="true"></span></button></div>
        </div>
        <table class="table table-condensed">
          <thead>
            <tr>
              <th>{{ 'GENERAL_ADDRESS' | translate }}</th>
              <th>{{ 'GENERAL_ACTION' | translate }}</th>
              <th>{{ 'GENERAL_REMOVE' | translate }}</th>
            </tr>
          </thead>
        </table>
        <table class="table table-condensed" style="table-layout:fixed" ng-show="$ctrl.cosignatoryArray.length">
          <tbody>
            <tr ng-repeat="acct in $ctrl.cosignatoryArray | reverse | startFrom:$ctrl.currentPage*$ctrl.pageSize | limitTo:$ctrl.pageSize">
              <td style="word-break:break-all">{{acct.address}}</td>
              <td>{{ 'GENERAL_ADD' | translate }}</td>
              <td><i class="fa fa-times" style="color:red;cursor:pointer;" ng-click="$ctrl.removeCosignFromList($ctrl.cosignatoryArray, acct)"></i></td>
            </tr>
          </tbody>
        </table>
        <div class="panel-body bg-info" ng-show="!$ctrl.cosignatoryArray.length">
          <p>{{ 'GENERAL_NO_RESULTS' | translate }}</p>
        </div>

      </div>

</div>
